<script setup lang="ts">
import { ref, onMounted } from 'vue'
import G6 from '@antv/g6'
import Mock from '@/views/mock/day2-dagre'
const mountNode = ref()

const init = () => {
  // 定义数据、实例化图、加载数据、渲染图
  const graph = new G6.Graph({
    container: mountNode.value,
    width: document.documentElement.clientWidth * 0.6,
    height: document.documentElement.clientHeight * 0.7,
    animate: true, // 启用动画
    fitView: true, // 自动适配画布大小
    modes: {
      default: ['drag-canvas', 'drag-node']
    },
    defaultNode: {
      size: 30
    },
    layout: {
      type: 'dagre',
      rankdir: 'LR', // 布局的方向 从左至右布局 LR, TB, RL, BT
      align: 'UL', // 节点对齐方式 对齐到左上角 UL, UR, DL, DR
      nodesep: 20, // 节点之间的间距
      ranksep: 30, // 层之间的间距
      controlPoints: true, // 节点控制点
      nodesepFunc: () => 1, // 节点之间的间距
      ranksepFunc: () => 1 // 层之间的间距
    },
    defaultEdge: {
      style: {
        lineWidth: 1,
        endArrow: {
          path: G6.Arrow.vee(5, 7, 0)
        }
      }
    }
  })
  // @ts-ignore
  graph.data(Mock) //  加载数据
  graph.render() // 渲染图
}

onMounted(() => {
  init()
})
</script>
<template>
  <div ref="mountNode" class="container" />
</template>

<style lang="scss" scoped>
.container {
  border: 4px solid #5b8ff9;
}
</style>
